<template>
  <div>
    <!-- <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
    >
      <el-menu-item index="1">基本信息</el-menu-item>
      <el-menu-item index="3">商品分类</el-menu-item>
      <el-menu-item index="4">处理中心</el-menu-item>
    </el-menu> -->
    <div class="w-50">
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm my_label"
      >
        <el-form-item label="商品名称">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="firstcategoryid" placeholder="一级类目">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, i) of firstcategory"
              :key="i"
            ></el-option>
          </el-select>
          <el-select v-model="secondcategoryid" placeholder="二级类目" id="secondcategory">
            <el-option
              :label="item.name"
              :value="item.name"
              v-for="(item, i) of secondcategory"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="ruleForm.describe"></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <div>
          <el-upload
            action="https://www.baidu.com"
            list-type="picture-card"
            :auto-upload="false"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </div>
        <el-form-item>
          <el-button type="primary" @click="addPro">提交</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<style>
.w-50 {
  width: 50%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.my_label label {
  color: #fff !important;
}
.avatar-uploader .el-upload:hover {
  border-color: #fff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        price: "",
        region: "",
        describe: "",
      },
      firstcategory: [],
      firstcategoryid: "",
      secondcategory: [],
      secondcategoryid: "",
      // 上传图片的数据
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      // 上传图片的数据
    };
  },
  methods: {
    // 上传图片
    handleRemove(file) {
      alert(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 重置表单
    reset() {
      alert("已清空");
      for (var k in this.ruleForm) {
        this.ruleForm[k] = "";
      }
    },
    // 发送请求添加商品
    addPro(){
      this.$axios.post("/products/addpro",`name=${this.ruleForm.name}&prise=${this.ruleForm.prise}&describe=${this.ruleForm.describe}&first_type_id=${this.ruleForm.first_type_id}&second_type_id=${this.ruleForm.second_type_id}${this.ruleForm.first_type_id}`).then(res=>{
        console.log(res.data);
      });
    }
  },
  mounted() {
    // 获取类别表  一级 && 二级
    this.$axios.get("/products/firstcategory").then((res) => {
      var { results } = res.data;
      if (res.data.code == "200") {
        this.firstcategory = results;
      }
    });
    this.$axios
      .get("/products/secondcategory", {
        params: {
          sid: this.firstcategoryid,
        },
      })
      .then((res) => {
        var { results } = res.data;
        if (res.data.code == "200") {
          this.secondcategory = results;
        }
      });
  },
  watch: {
    // 监视一级类目的变化
    firstcategoryid(newVal) {
       this.secondcategory="";
      this.$axios
        .get("/products/secondcategory", {
          params: {
            sid: newVal,
          },
        })
        .then((res) => {
          var { results } = res.data;
          if (res.data.code == "200") {
            this.secondcategory = results;
            this.secondcategoryid = "";
          }
        });
    },
  },
};
</script>